컴포넌트의 라이프 사이클

리액트는 컴포넌트 기반의 라이브러리로 View를 담당한다. 그리고 리액트에서 컴포넌트들은 라이프 사이클(생명주기)를 가지게 된다. 이는 컴포넌트에게 자신이 화면에 보이기 위해 준비되는 과정, 업데이트 되는 과정, 사라지는 과정들이 존재한다는 것이다. 개발자는 이러한 과정들을 적절히 관리함으로써 컴포넌트를 의도대로 클라이언트에게 보여주게 된다.

라이프 사이클의 분류

---

위의 사진은 클래스형 컴포넌트의 라이프 사이클을 나타낸다. Y축이 리액트 엔진의 렌더링 단계를 표시하고 있고, X축이 컴포넌트의 라이프 사이클 단계를 표시한다. 컴포넌트의 라이프 사이클은 다음과 같은 3단계로 분류된다.

• 마운팅 단계 : 컴포넌트를 생성
• 업데이팅 단계 : 컴포넌트 업데이트
• 언마운팅 단계 : 컴포넌트 제거

각 단계에서 사용할 수 있는 메서드를 자세히 살펴보도록 하겠다.

1. 마운팅 단계

---

컴포넌트의 마운팅 단계는 컴포넌트를 생성하는 단계다.

1-1. constructor

: 컴포넌트의 클래스 생성자로 컴포넌트를 만들 때 처음으로 실행된다. 해당 메서드에서 초기 state를 정하게 된다. 만약 state가 필요없다면 작성하지 않아도 된다. 리액트 엔진의 렌더링 단계에 실행되기 때문에 해당 시점에서는 컴포넌트가 화면에 보이지 않는다.

1-2. getDerivedStateFromProps

: 리액트 16.3 버전 이후에 나온 라이프사이클 메서드다. props로 받아온 값을 state로 동기화 해줄 수 있다. 컴포넌트의 마운팅, 업데이트 단계에서 사용될 수 있다.

1-3. render

: 컴포넌트를 렌더링 하는 메서드다. 렌더링 하는 메서드로 가상 DOM에 컴포넌트의 구조를 로딩하는 것이다. 이 메서드까지가 리액트가 브라우저 DOM에 커밋하기 전에 이루어지는 메서드다.

1-4. componentDidMount

: Mounting 단계의 마지막 부분이다. 컴포넌트의 첫 렌더링이 완료되었을 때 실행되는 메서드다. 오직 초기 컴포넌트의 로딩 이후에 한번만 실행되는 라이프사이클 메서드다. 이전 단계에서 메모리 상에 계산된 가상 DOM의 구조가 실제 브라우저의 DOM에 커밋된 상태다. 따라서 해당 메서드 내부에서 브라우저의 비동기 이벤트 등을 처리하거나, 비동기 작업들을 처리할 수 있다.

2. 업데이팅 단계

---

컴포넌트가 새롭게 업데이트 되는 라이프 사이클 단계다. 예컨데, state의 변화로 컴포넌트의 시각적 구조에 변화가 발생하는 경우다.

• state가 바뀔 때
• props가 바뀔 때
• 부모 컴포넌트가 리렌더링 될 때

대표적으로 위의 3가지 상황에 업데이팅 단계로 접어든다.

2-1.getDerivedStateFromProps

: 컴포넌트의 props나 state가 바뀌었을 때 호출된다.

2-2. shouldComponentUpdate

: props 또는 state를 변경했을 때, 컴포넌트가 리렌더링 될지 말지를 결정하는 메서드로, true or false값을 반환한다. 디폴트값으로 true가 설정되며, false로 설정할 경우 리렌더링되지 않는다.

2-3. render

: 컴포넌트를 리렌더링 해준다.

2-4. getSnapShotBeforeUpdate

: 컴포넌트의 변경사항을 브라우저 DOM에 커밋하기 이전에 호출하는 메서드다. 업데이트하기 직전의 값을 참고해야할 경우에 사용할 수 있다.

2-5. componentDidUpdate

: 리렌더링이 완료된 후 실행하는 메서드다. 브라우저의 DOM에 커밋이 완료된 상태에 호출하기 때문에, 호출 이후 DOM 관련 처리를 할 수 있다. 또한 이전 props, state 값에 접근할 수 있다.

3. 언마운팅 단계

---

마운트의 반대 과정으로 컴포넌트를 브라우저 DOM에서 제거하는 과정이다.

3-1. componentWillUnmount

: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드다. componentDidMount에서 등록한 브라우저의 비동기 이벤트들이 있다면, 여기서 제거작업을 한다.

4. 함수 컴포넌트의 라이프 사이클

---

리액트 17버전 이후, React Hook이 발표되며 이제는 함수형 컾포넌트를 쓰게 되었다. 함수형 컴포넌트는 라이프 사이클 메서드를 지원하지 않는다. 하지만 오히려 React hook을 활용하여 생명주기를 더욱 간편하게 구현할 수 있게 되었다.

- 마운팅 단계

함수형으로 작성된 컴포넌트를 Return함으로써 마운팅된다.

- 업데이팅 단계

함수형 컴포넌트 내부의 hook을 통해 state 업데이트가 발생하며 업데이트된다.

- 언마운팅 단계

언마운팅 단계는 useEffect hook을 통해 관리될 수 있다. 아래 설명을 추가하고자 한다.

useEffect

함수형 컴포넌트의 생명주기를 설명하는데 가장 중요한 hook이라 생각한다. 리액트 공식문서의 설명에 따르면 componentDidMount, componentDidUpdate, componentWillIUnmount의 역할을 하는 것이 useEffect hook이다.

- componentDidMount & useEffect

  useEffect(() => {
    // ...
  },[]);

: useEffect의 의존성 배열을 비워둘 때, 컴포넌트가 마운팅된 후 한 번만 실행된다.

- componentDidUpdate & useEffect

  useEffect(() => {
    // ...
  },[state or props]);

: useEffect의 의존성 배열에 특정 state나 props를 입력할 때 componentDidUpdate의 역할을 한다. 해당 데이터의 업데이트가 발생했을 때 실행된다.

- componentWillUnmount & useEffect

  useEffect(() => {
    return () => {
    	// clean up
    }
  },[]);

: useEffect 내부에 return 함수를 작성한다. 해당 컴포넌트가 언마운팅될 때 clean up할 이벤트 등을 return 함수 내부에 작성한다.

마치며

긴 글 읽어주셔서 감사합니다! 🥹